<template>
  <Modal
    v-model="modal"
    :title="title"
    :loading="loading"
    :mask-closable="false"
    ok-text="确定"
    @on-ok="addPlan"
    width="800"
  >
    <Tabs :value="curTab" @on-click="changeTab">
      <!-- <TabPane :label="tab.title" :name="tab.value" v-for="tab in tableList" :key="tab.value">
                 <Select filterable
                    v-model="skill.query.id"
                    placeholder="请选择技能树"
                    @on-change="getSkillDtail"
                    class="w150"
                    clearable
                    transfer
                >
                    <Option v-for="skill in skill.list" :value="skill.id" :key="skill.id">{{
                        skill.name
                    }}</Option>
                </Select>
            </TabPane> -->
      <TabPane label="技能树" name="skill" style="min-height: 30vh" v-if="false">
        <div class="flex-end mb10">
          <WarningTip
            content="请选择技能树获取数据"
            placement="left"
          ></WarningTip>
          <!-- <p style="color:#f90">
                        <Icon type="ios-information-circle" />请选择技能树获取数据
                    </p> -->
          <Select filterable
            v-model="skill.query.id"
            placeholder="请选择技能树"
            @on-change="getSkillDtail"
            class="w150"
            clearable
            transfer
            filterable
          >
            <Option
              v-for="skill in skill.list"
              :value="skill.id"
              :key="skill.id"
              :title="skill.name"
              style="max-width: 150px"
              >{{ skill.name }}</Option
            >
          </Select>
        </div>
        <TableList
          :columns="skill.col"
          :data="skill.planList"
          :page="skill.query.pageIndex"
          :size="skill.query.pageSize"
          :total="skill.total"
          noDataText="暂无数据"
          :showDef="false"
          @change-page="
            (page) => {
              return this.changePlanPage(page, this.skill);
            }
          "
          selectKey="id"
          :showSelectTag="true"
          :selectName="
            (data) => {
              return `${data.name}-${data.setType === 1 ? '课件' : '试卷'}`;
            }
          "
          ref="selectTable"
          @selection-change="
            (selection) => {
              return this.selectPlanData(selection, this.skill);
            }
          "
        >
        </TableList>
      </TabPane>
      <TabPane label="课程" name="course" style="min-height: 30vh">
        <div class="flex-end mb10">
          <WarningTip content="请选课程获取数据" placement="left"></WarningTip>
          <!-- <p style="color:#f90"><Icon type="ios-information-circle" />请选课程获取数据</p> -->
          <Select filterable
            v-model="course.query.id"
            placeholder="请选择课程"
            @on-change="getCourseExpList"
            class="w150"
            clearable
            transfer
            filterable
          >
            <Option
              v-for="item in course.list"
              :value="item.id"
              :key="item.id"
              :title="item.name"
              style="max-width: 150px"
              >{{ item.name }}</Option
            >
          </Select>
        </div>
        <TableList
          :columns="exper.col"
          :data="course.expList"
          :page="course.query.pageIndex"
          :size="course.query.pageSize"
          :total="course.total"
          noDataText="暂无数据"
          :showDef="false"
          @change-page="
            (page) => {
              return this.changeCoursePage(page, this.course);
            }
          "
          selectKey="id"
          :showSelectTag="true"
          selectName="name"
          ref="selectCourseTable"
          @selection-change="
            (selection) => {
              return this.selectPlanData(selection, this.course);
            }
          "
        >
        </TableList>
      </TabPane>
      <TabPane label="课件" name="exper" style="min-height: 30vh">
        <div class="flex-end mb10">
          <Input
                        v-model="exper.query.ecname"
                        placeholder="请输入课件名称"
                        @on-change="getExperData"
                         class="w150"
                    ></Input>
        </div>
        <TableList
          :columns="exper.col"
          :data="exper.list"
          :page="exper.query.pageIndex"
          :size="exper.query.pageSize"
          :total="exper.total"
          noDataText="暂无数据"
          :showDef="false"
          @change-page="
            (page) => {
              return this.changeExperPage(page, this.exper);
            }
          "
          selectKey="id"
          :showSelectTag="true"
          selectName="name"
          ref="selectExperTable"
          @selection-change="
            (selection) => {
              return this.selectPlanData(selection, this.exper);
            }
          "
        >
        </TableList>
      </TabPane>
      <TabPane label="试卷" name="paper" style="min-height: 30vh">
        <div class="flex-end mb10">
        <Input
            v-model="paper.query.paperName"
            placeholder="请输入试卷名称"
            @on-change="queryTestPaperList"
            class="w150"
        ></Input>
        </div>
        <TableList
          :columns="paper.col"
          :data="paper.list"
          :page="paper.query.pageIndex"
          :size="paper.query.pageSize"
          :total="paper.total"
          noDataText="暂无数据"
          :showDef="false"
          @change-page="
            (page) => {
              return this.changePaperPage(page, this.paper);
            }
          "
          selectKey="id"
          :showSelectTag="true"
          selectName="name"
          ref="selectPaperTable"
          @selection-change="
            (selection) => {
              return this.selectPlanData(selection, this.paper);
            }
          "
        >
        </TableList>
      </TabPane>
    </Tabs>
    <div v-if="allSelect.length > 0" class="tag-wrapper">
      <Divider></Divider>
      <Tag
        v-for="item in allSelect"
        :key="item.id"
        color="primary"
        type="border"
        >{{ item.name }}-{{ item.setType === 1 ? "课件" : "试卷" }}</Tag
      >
    </div>
  </Modal>
</template>
<script>
import encryption from '@/libs/encryption.js';
import { dealSearchParams, debounce } from '@/libs/utils';
import { querySkill, querySkillBindDetail } from '@/api/selfStudy/skill.js';
import { getExpListNotPrivate, getcourselist, courseExpDetail } from '@/api/selfStudy/courseExp.js';
import { queryTestPaperList } from '@/api/testpaper';
import { queryTeachSchedule } from '@/api/selfStudy/class_new.js';
import {
    diffMixin,
    typeAndDirectionMixin,
    imagePathDealMixin,
    deployStatusMixin,
    experTypeMixin,
    visibleMixin
} from '@/mixin/study';
export default {
    name: 'AddContentModal',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        egId: {
            required: true,
            type: String
        },
        selectPlanList: {
            type: Array,
            default: () => []
        }
    },
    mixins: [
        diffMixin,
        // typeAndDirectionMixin,
        imagePathDealMixin,
        deployStatusMixin,
        experTypeMixin,
        visibleMixin
    ],
    data() {
        let September = sessionStorage.getItem('November');
        September = JSON.parse(encryption.SelfUseDecrypt(September));
        return {
            USER_ID: September.id,
            USER_NAME: September.nickname,
            isRootDesigner: September.isRootDesinger,
            modal: this.value,
            loading: true,
            title: '创建'+(this.$route.meta.title+"").substring(0,2)+'内容',
            // curTab: 'skill',
            curTab: 'course',
            allUsed: [],
            selectPlanIds: [],
            tabList: [
                {
                    value: 'skill',
                    title: '技能树'
                },
                {
                    value: 'course',
                    title: '课程'
                },
                {
                    value: 'exper',
                    title: '课件'
                },
                {
                    value: 'paper',
                    title: '试卷'
                }
            ],
            skill: {
                tip: '请选择技能树获取数据',
                Select: [
                    {
                        list: [],
                        value: 'id',
                        label: 'name',
                        fun: this.getSkillDtail
                    }
                ],
                list: [],
                planList: [],
                total: 0,
                select: [],
                used: [],
                query: {
                    id: '',
                    pageIndex: 1,
                    pageSize: 10,
                    type: [1, 3]
                },
                fun: this.querySkillBindDetail,
                col: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'left'
                    },
                    {
                        title: '名称',
                        key: 'name',
                        tooltip: true
                    },
                    {
                        title: '类型',
                        key: 'type',
                        tooltip: true,
                        filter: (type) => {
                            return type === 1 ? '课件' : '试卷';
                        }
                    }
                ]
            },
            course: {
                list: [],
                expList: [],
                select: [],
                used: [],
                query: {
                    pageIndex: 1,
                    pageSize: 10,
                    order: 'desc',
                    sortBy: 'createTime',
                    selfType: 0,
                    ecname: ''
                },
                fun: this.getAllCourse
            },
            exper: {
                list: [],
                select: [],
                used: [],
                query: {
                    pageIndex: 1,
                    pageSize: 10,
                    order: 'desc',
                    sortBy: 'createTime',
                    ecname: '',
                    // typeCode: 100010001
                    selfType: 0
                },
                fun: this.getExperData,
                col: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'left'
                    },
                    {
                        title: '名称',
                        key: 'ecname',
                        tooltip: true
                    },
                    {
                        title: '难度',
                        key: 'difficulty',
                        filter: (difficulty) => {
                            return this.handleDiff(difficulty);
                        }
                    },
                    // {
                    //     title: '可见范围',
                    //     key: 'isPublic',
                    //     setColor: (isPublic) => {
                    //         return this.filterVisible(isPublic, 'color');
                    //     },
                    //     filter: (isPublic) => {
                    //         return this.filterVisible(isPublic, 'tetx');
                    //     }
                    // },
                    {
                        title: '课时',
                        key: 'hours',
                        filter: (hours) => {
                            return hours;
                        }
                    },
                    // {
                    //     title: '部署状态',
                    //     key: 'deployStatus',
                    //     setColor: (deployStatus) => {
                    //         return this.filterDeployStatus(deployStatus, 'color');
                    //     },
                    //     filter: (deployStatus) => {
                    //         return this.filterDeployStatus(deployStatus, 'text');
                    //     }
                    // },
                    // {
                    //     title: '设计者',
                    //     key: 'designer',
                    //     tooltip: true
                    // },
                    // { title: '创建时间', key: 'createTime', tooltip: true, minWidth: 120 },
                    // {
                    //     title: '方向',
                    //     key: 'direction',
                    //     filter: (direction) => {
                    //         return this.handleDirection(direction);
                    //     },
                    //     tooltip: true
                    // },
                    // {
                    //     title: '类型',
                    //     key: 'typeCode',
                    //     filter: (typeCode) => {
                    //         return this.handleCodeType(typeCode);
                    //     },
                    //     tooltip: true
                    // },
                    {
                        title: '课件模式',
                        key: 'expType',
                        filter: (expType) => {
                            return this.handleExperType(expType);
                        },
                        tooltip: true
                    }
                    // {
                    //     type: 'Tag',
                    //     title: '使用人数',
                    //     key: 'subscriberNum',
                    //     fun: this.showSubscriberModal,
                    //     filter: (subscriberNum) => {
                    //         return subscriberNum || 0;
                    //     }
                    // }
                ]
            },
            paper: {
                list: [],
                select: [],
                used: [],
                query: {
                    pageIndex: 1,
                    pageSize: 10,
                    order: 'desc',
                    sortBy: 'createTime',
                    name: ''
                },
                fun: this.queryTestPaperList,
                col: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'left'
                    },
                    {
                        title: '名称',
                        key: 'paperName',
                        tooltip: true,
                        placement: 'top-left',
                        minWidth: 50
                    },
                    {
                        title: '难度',
                        key: 'difficulty',
                        minWidth: 50,
                        filter: (difficulty) => {
                            return this.handleDiff(difficulty);
                        }
                    },
                    // {
                    //     title: '可见范围',
                    //     key: 'visibility',
                    //     minWidth: 50,
                    //     setColor: (visibility) => {
                    //         return this.filterVisible(visibility, 'color');
                    //     },
                    //     filter: (visibility) => {
                    //         return this.filterVisible(visibility, 'tetx');
                    //     }
                    // },
                    {
                        title: '分数',
                        key: 'totalScore',
                        tooltip: true,
                        minWidth: 50
                    },
                    {
                        title: '考试时长',
                        key: 'duration',
                        tooltip: true,
                        minWidth: 50,
                        filter: (duration) => {
                            return `${duration ? duration : 60}分钟`;
                        }
                    },
                    {
                        title: '描述',
                        key: 'description',
                        tooltip: true,
                        minWidth: 50
                    }
                ]
            }
        };
    },
    computed: {
        pageSTitle () { // 小菜单明
          //当前菜单显示名
          return (this.$route.meta.title+"").substring(0,2);
        },
        allSelectIds() {
            return this.allSelect.map((item) => item.id);
        },
        allSelect() {
            return [
                ...this.skill.select,
                ...this.exper.select,
                ...this.course.select,
                ...this.paper.select
            ];
        },
        allUsedIds() {
            return [...this.allUsed.map((item) => item.exId), ...this.selectPlanIds];
        }
    },
    watch: {
        modal(val) {
            if (!val) {
                this.$emit('input', false);
                this.$emit('close');
            }
        },
        value(val) {
            if (val) {
                this.init();
            }
            this.modal = val;
        }
    },
    methods: {
        async init() {
            // this.skill.select = [];
            // this.course.select = [];
            // this.exper.select = [];
            // this.paper.select = [];
            this.initData();
            this.selectPlanIds = this.selectPlanList.map((item) => item.id);
            await this.queryTeachSchedule();
            this.querySkillList();
        },
        initData() {
            // this.$refs.selectTable.clearSelect();
            this.$refs.selectCourseTable.clearSelect();
            this.$refs.selectExperTable.clearSelect();
            this.$refs.selectPaperTable.clearSelect();
            this.skill.planList = [];
            this.skill.total = 0;
            this.skill.query = {
                id: '',
                pageIndex: 1,
                pageSize: 10,
                type: [1, 3]
            };
            this.skill.used = [];
            this.course.list = [];
            this.course.expList = [];
            this.course.used = [];
            this.course.query = {
                pageIndex: 1,
                pageSize: 10,
                order: 'desc',
                sortBy: 'createTime',
                ecname: '',
                selfType: 0
            };
            // this.changeTab('skill');
            this.changeTab('course');
            return;
            let selectPlanIds = this.selectPlanList.map((item) => item.id);
            this.skill.select.forEach((item) => {
                if (!selectPlanIds.includes(item.id)) {
                    this.$refs.selectTable.closeItem(item);
                }
            });
            this.course.select.forEach((item) => {
                if (!selectPlanIds.includes(item.id)) {
                    this.$refs.selectCourseTable.closeItem(item);
                }
            });
            this.exper.select.forEach((item) => {
                if (!selectPlanIds.includes(item.id)) {
                    this.$refs.selectExperTable.closeItem(item);
                }
            });
            this.paper.select.forEach((item) => {
                if (!selectPlanIds.includes(item.id)) {
                    this.$refs.selectPaperTable.closeItem(item);
                }
            });
        },
        addPlan() {
            this.$emit('selection-change', this.allSelect);
        },
        changeTab(name) {
            this.curTab = name;
            this.skill.query.id = ''
            this.course.query.id = ''
            this.exper.query.ecname = ''
            this.paper.query.paperName = ''
            if (name === 'skill') {
                this.changePlanPage(1, this.skill);
                // this.$refs.selectTable.initSelect(this.skill.select);
            } else if (name === 'exper') {
                this.changeExperPage(1, this.exper);
                // this.$refs.selectExperTable.initSelect(this.skill.select);
            } else if (name === 'course') {
                if (this.course.query.id) {
                    this.changeCoursePage(1);
                    // this.$refs.selectCourseTable.initSelect(this.course.select);
                } else {
                    this.getAllCourse();
                    // this.$refs.selectPaperTable.initSelect(this.course.select);
                }
            } else {
                this.changePaperPage(1);
                // this.$refs.selectPaperTable.initSelect(this.exper.select);
            }
        },
        //获取技能树列表
        querySkillList() {
            let params = {
                pageIndex: 1,
                pageSize: 10000,
                available: 1
            };
            querySkill(params)
                .then((data) => {
                    if (data.code === 1) {
                        this.skill.list = data.data.items;
                        this.skill.Select[0].list = data.data.items;
                    }
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        getSkillDtail() {
            if (!this.skill.query.id) {
                this.skill.total = 0;
                this.skill.planList = [];
                return;
            }
            querySkillBindDetail(this.skill.query).then(({ code, data, message }) => {
                if (code === 1) {
                    let list = data.items;
                    list.forEach((planItem, index) => {
                        planItem.setType = planItem.type;
                        planItem._disabled =
                            (this.allSelectIds.includes(planItem.id) &&
                                !this.skill.select.map((item) => item.id).includes(planItem.id)) ||
                            this.allUsedIds.includes(planItem.id);
                    });
                    this.skill.total = data.total;
                    this.skill.planList = list;
                }
            });
        },
        changePlanPage(page, data) {
            data.query.pageIndex = page;
            this.getSkillDtail();
        },
        changeExperPage(page, data) {
            data.query.pageIndex = page;
            this.getExperData();
        },
        queryTeachSchedule() {
            if (!this.egId) {
                return;
            }
            return new Promise((resolve, reject) => {
                let params = {
                    pageIndex: 1,
                    pageSize: 10000,
                    egId: this.egId
                };
                queryTeachSchedule(params)
                    .then(({ code, attribute: data, message }) => {
                        if (code === 1) {
                            this.allUsed = data.dataList.map((item) => {
                                if (item.egType === 'exam') {
                                    item.exId = item.paperId;
                                }
                                return item;
                            });
                            resolve();
                        } else {
                            this.$Message.error(message);
                        }
                    })
                    .catch((error) => {});
            });
        },
        selectPlanData(selection, data) {
            data.select = selection;
        },
        handleClose(item) {
            this.$refs.selectTable.closeItem(item);
        },
        handleCourseClose(item) {
            this.$refs.selectCourseTable.closeItem(item);
        },
        handleExperClose(item) {
            this.$refs.selectExperTable.closeItem(item);
        },
        handlePaperClose(item) {
            this.$refs.selectPaperTable.closeItem(item);
        },
        clearSelect() {
            this.$refs.selectTable.clearSelect();
        },
        // 课件列表
        getExperData() {
            if (this.requestLoading) {
                //正在请求，有新的请求
                this.hasNoExecuteRequest = true;
                return;
            }
            this.requestLoading = true;
            
            // story-view-2566 
            let queryparam = JSON.parse(JSON.stringify(this.exper.query))
            queryparam.selfTypeList = queryparam.selfType?[1,2]:[0,2],
            queryparam.selfType = undefined
            
            
            getExpListNotPrivate(queryparam)
                .then((data) => {
                    if (data.code == 1) {
                        let attribute = data.data;
                        let items = attribute.items;
                        items.forEach((exper) => {
                            exper.id = exper.ecid;
                            exper.name = exper.ecname;
                            exper.direction = exper.typeCode;
                            exper.setType = 1;
                            exper._disabled =
                                (this.allSelectIds.includes(exper.ecid) &&
                                    !this.exper.select
                                        .map((item) => item.id)
                                        .includes(exper.ecid)) ||
                                this.allUsedIds.includes(exper.ecid);
                            // this.getExperSubscriber(exper);
                        });
                        this.exper.list = items;
                        this.exper.total = attribute.total;
                    } else {
                        this.$Message.error(data.message);
                    }
                    this.requestLoading = false;
                    this.sceneListLoading = false;
                    if (this.hasNoExecuteRequest) {
                        this.changePage(1);
                        this.hasNoExecuteRequest = false;
                    }
                })
                .catch((err) => {
                    this.sceneListLoading = false;
                    this.requestLoading = false;
                    if (this.hasNoExecuteRequest) {
                        this.changePage(1);
                        this.hasNoExecuteRequest = false;
                    }
                    console.log(err);
                });
        },
        //获取课程资源
        getAllCourse() {
            let params = {
                pageIndex: 1,
                pageSize: 10000,
                enable: 1,
                selfType: 0
            };
            getcourselist(params)
                .then((data) => {
                    if (data.code == 1) {
                        let list = data.data.items;
                        list.forEach((item) => {
                            item.id = item.ccid;
                            item.name = item.ccname;
                        });
                        this.course.list = list.filter(
                            (course) => course.expriments && course.expriments.length > 0
                        );
                    } else {
                        this.course.list = [];
                    }
                })
                .catch((err) => {
                    _this.$Message.error('获取课程列表失败，请稍后再试');
                })
                .finally(() => {});
        },
        //课程课件
        getCourseExpList() {
            if (!this.course.query.id) {
                this.course.expList = [];
                this.course.total = 0;
                return;
            }
            courseExpDetail(this.course.query.id).then((data) => {
                if (data.code == 1) {
                    let list = data.data;
                    list.forEach((exper) => {
                        exper.id = exper.ecid;
                        exper.name = exper.ecname;
                        exper.direction = exper.typeCode;
                        exper.setType = 1;
                        exper._disabled =
                            (this.allSelectIds.includes(exper.ecid) &&
                                !this.course.select.map((item) => item.id).includes(exper.ecid)) ||
                            this.allUsedIds.includes(exper.ecid);
                    });
                    this.course.copyExpList = list;
                    this.course.expList = this.course.copyExpList.slice(0, 10);
                    this.course.total = list.length;
                }
            });
        },
        changeCoursePage(page) {
            this.course.query.pageIndex = page;
            this.course.expList = this.course.copyExpList.slice(
                (page - 1) * this.course.query.pageSize,
                page * this.course.query.pageSize
            );
            // this.getCourseExpList();
        },
        queryTestPaperList() {
            //查询试卷列表
            let query = {
                pageIndex: this.paper.query.pageIndex,
                pageSize: this.paper.query.pageSize,
            };
            let params = {
                paperName: this.paper.query.paperName,
                type: 'teach',
                paperType: 'paper_fixed',
                advanced : false,
                // queryType: "xl"
            };
            queryTestPaperList(params, query)
                .then(({ code, data, message }) => {
                    if (code === 1) {
                        let list = data.items;
                        list.forEach((item) => {
                            item.id = item.paperId;
                            item.name = item.paperName;
                            item.setType = 3;
                            item._disabled =
                                (this.allSelectIds.includes(item.paperId) &&
                                    !this.paper.select
                                        .map((item) => item.id)
                                        .includes(item.paperId)) ||
                                this.allUsedIds.includes(item.paperId);
                        });
                        this.paper.list = list;
                        this.paper.total = data.total;
                    } else {
                        this.paper.list = [];
                        this.paper.total = 0;
                        this.$Message.error(message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                    this.paper.list = [];
                    this.paper.total = 0;
                })
                .finally(() => {});
        },
        changePaperPage(page) {
            this.paper.query.pageIndex = page;
            this.queryTestPaperList();
        },
        getCompanyExpers() {
            let params = dealSearchParams(this.search);
            getExperOfCompany(params)
                .then((res) => {
                    let { code, data, message } = res.data;
                    if (code === 1) {
                        this.total = data.total;
                        let items = data.items;
                        for (let i = 0; i < items.length; i++) {
                            items[i]._checked = false;
                            items[i]._disabled = false;
                            if (this.saveUsersNameArr.indexOf(items[i]['username']) > -1) {
                                items[i]._disabled = true;
                                items[i]._checked = true;
                            }
                            if (this.selectUsersIdArr.indexOf(items[i]['id']) > -1) {
                                items[i]._checked = true;
                            }
                        }
                        this.dataList = items;
                    } else {
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        changePage(page, data) {
            data.pageIndex = page;
            this.getCompanyExpers();
        },
        debounceSearch: debounce(function() {
            this.changePage(1);
        }, 500),
        refresh() {
            this.search = {
                pageIndex: 1,
                pageSize: 10,
                type: 'experimenter',
                order: 'desc',
                sortBy: 'created',
                username: '',
                creator: !this.isRootDesinger ? this.USER_ID : ''
            };
            this.getCompanyExpers();
        },
        async getExpRoleUsers() {
            let params = {
                pageIndex: 1,
                pageSize: 100000
            };
            let { code, data, message } = await getExpRoleUsers(this.roleId, params).catch(
                (error) => {
                    console.log(error);
                }
            );
            if (code === 1) {
                this.saveUsers = data.items;
            } else {
                this.$Message.error(message);
            }
        },
        addExpRoleUsers() {
            let users = this.selectUsers.map((user) => {
                return { userId: user.id, userName: user.nickname };
            });
            addExpRoleUsers(this.roleId, users)
                .then(({ code, data, message }) => {
                    if (code === 1) {
                        this.$Message.info('创建成功');
                        this.modal = false;
                    } else {
                        this.resetLoading();
                        this.$Message.error(message);
                    }
                })
                .catch((error) => {
                    this.resetLoading();
                    console.log(error);
                });
        },
        handleUserClose(id) {
            let index = this.dataList.findIndex((item) => item.id == id);
            if (index != -1) {
                this.$refs.userTable.toggleSelect(index);
            } else {
                this.delSelUser(id);
            }
        },
        clearSelect() {
            this.selectUsers = [];
            this.$refs.userTable.selectAll(false);
        },
        selectUser(selection, row) {
            if (!row) {
                //全选
                selection.forEach((user) => {
                    let selExperIds = this.selectUsers.map((user) => user.id);
                    if (!selExperIds.includes(user.id)) {
                        let index = this.dataList.findIndex((item) => item.ecid == user.id);
                        if (index != -1) {
                            this.dataList[index]._checked = true;
                        }
                        this.selectUsers.push(user);
                    }
                });
            } else {
                let index = this.dataList.findIndex((item) => item.id == row.id);
                if (index != -1) {
                    this.dataList[index]._checked = true;
                }
                this.selectUsers.push(row);
            }
        },
        removeUser(selection, row) {
            if (!row) {
                //全选
                this.dataList.forEach((user) => {
                    user._checked = false;
                    this.delSelUser(user.id);
                });
            } else {
                let listExper = this.dataList.filter((item) => item.id == row.id);
                if (listExper.length > 0) {
                    listExper[0]._checked = false;
                }
                this.delSelUser(row.id);
            }
        },
        delSelUser(id) {
            let delExperIndex = this.selectUsers.findIndex((items) => items.id === id);
            if (delExperIndex >= 0) {
                this.selectUsers.splice(delExperIndex, 1);
            }
        },
        resetLoading() {
            this.loading = false;
            setTimeout(() => {
                this.loading = true;
            });
        }
    }
};
</script>
<style scoped>
.w150 {
  width: 150px;
}
.mb10 {
  margin-bottom: 10px;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
